<template>
  <div class="login-page">
    <el-tabs v-model="activeName" class="login-tabs">
      <el-tab-pane label="登录" name="logform">
        <Login></Login>
      </el-tab-pane>
      <el-tab-pane label="注册" name="regform">
        <Register></Register>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Login from "@/components/OraLoginform.vue";
import Register from "@/components/OraRegisterform.vue";
export default {
  data() {
    return {
      activeName: "logform", // 默认选中的标签
    };
  },
  components: {
    Login,
    Register,
  },
  methods: {

  },
  mounted() {
  if (this.$route.query.msg) {
    // 弹窗
    this.$message.warning(this.$route.query.msg);
  }
}
};
</script>

<style scoped>
/* 整体登录页面 */
.login-page {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dfe0df; /* 设置背景颜色 */
}

/* 设置登录注册主容器样式 */
.login-tabs{
  width: 400px; /* 设置宽度 */
  height: 400px; /* 设置高度 */
  background-color: #545c64; /* 设置背景颜色 */
  border-radius: 20px; /* 设置圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列子元素 */
}


/* 设置活动标签下划线的样式 */
::v-deep .el-tabs__active-bar {
  background-color: #ffa500; 
  width: 29px!important;
}

 /* 设置活动标签的文字颜色 */
::v-deep .el-tabs__item.is-active {
  color: #ffa500;
  opacity: 1;
}

/* 设置未选中标签的样式 */
::v-deep .el-tabs__item{
  color: #f6e5df;
}

/* 设置鼠标悬停未选中标签的样式 */
::v-deep .el-tabs__item:hover {
  color: #ffb188;
  cursor: pointer;
  opacity: 1;
}

</style>